<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./search.css">
</head>

<body>
    <div class="search-box">
        <span class="searchbg">
            <input type="text" class="searchInput" placeholder="音乐/视频/电台/用户">
        </span>
    </div>
    <div class="search-frame" style="display:none;">
        <div class="frame-list">
            <p class="note">
                <a href=""></a>
            </p>
            <div class="rap">
                <!--number1-->
                <div class="context-first" style="display:none">
                    <h3 class="char">
                        <p class="w">单曲</p>
                    </h3>
                    <ul class="single">

                    </ul>
                </div>
                <div class="context-second" style="display:none">
                    <h3 class="char">
                        <p class="w">歌手</p>
                    </h3>
                    <ul class="singer">

                    </ul>
                </div>
                <div class="context-third" style="display:none">
                    <h3 class="char">
                        <p class="w">专辑</p>
                    </h3>
                    <ul class="album">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        axios.defaults.baseURL = 'http://g6f8h5.natappfree.cc'
        const searchInput = document.querySelector('.searchInput')
        const searchBox = document.querySelector('.search-frame')
        searchInput.addEventListener('input', function (event) { //写input的原因是如果是keydown 不回车拿不到返回的内容 内容的运输始终需要一步enter或其他符号
            const s = searchInput.value
            searchBox.style.display = 'block'
            async function getSearch() {
                try {
                    const response = await axios.get('/search', {
                        params: {
                            s: s
                        }
                    })
                    return response.data.data
                } catch (error) {
                    console.log(error)
                }
            }
            async function useSearch() {
                let SearchData = await getSearch()
                // console.log(SearchData)
                // console.log(SearchData[0].name)
                const searchUsers = document.querySelector('.frame-list a')
                searchUsers.innerHTML = `搜"${searchInput.value}"相关用户`
                //对name的遍历和读写
                const userName = SearchData.map(SearchData => SearchData.name)
                // console.log(userName)
                const filterName = userName.filter(userName => userName.includes(searchInput.value))
                console.log(filterName)
                const single = document.querySelector('.single')
                //如果元素个数不为0 则显示单曲盒子
                if (filterName.length > 0) {
                    const singleBox = document.querySelector('.context-first')
                    singleBox.style.display = 'block'
                }
                filterName.forEach(element => {
                    const newLi = document.createElement('li')
                    newLi.innerHTML = element
                    single.appendChild(newLi)
                })
                //对author的遍历和读写
                const author = SearchData.map(SearchData => SearchData.author)
                // console.log(userName)
                const filterAuthor = author.filter(author => author.includes(searchInput.value))
                console.log(filterAuthor)
                const singer = document.querySelector('.singer')
                if (filterAuthor.length > 0) {
                    const singerBox = document.querySelector('.context-second')
                    singerBox.style.display = 'block'
                }
                filterAuthor.forEach(element => {
                    const newLi = document.createElement('li')
                    newLi.innerHTML = element
                    singer.appendChild(newLi)
                })
                //对album的遍历和读写
                const albumlist = SearchData.map(SearchData => SearchData.album)
                // console.log(userName)
                const filterAlbum = albumlist.filter(albumlist => albumlist.includes(searchInput.value))
                console.log(filterAlbum)
                const album = document.querySelector('.album')
                if (filterAlbum.length > 0) {
                    const albumBox = document.querySelector('.context-third')
                    albumBox.style.display = 'block'
                }
                filterAlbum.forEach(element => {
                    const newLi = document.createElement('li')
                    newLi.innerHTML = element
                    album.appendChild(newLi)
                })
            }
            useSearch()

            // const s = searchInput.value
            // searchBox.style.display = 'block'
            // async function getSearch() {
            //     try {
            //         const response = await axios.get('/search', {
            //             params: {
            //                 s: s
            //             }
            //         })
            //         return response.data.data
            //     } catch (error) {
            //         console.log(error)
            //     }
            // }
            // async function useSearch() {
            //     let SearchData = await getSearch()
            //     // console.log(SearchData)
            //     // console.log(SearchData[0].name)
            //     const searchUsers = document.querySelector('.frame-list a')
            //     searchUsers.innerHTML = `搜"${searchInput.value}"相关用户`
            //     //对name的遍历和读写
            //     const userName = SearchData.map(SearchData => SearchData.name)
            //     // console.log(userName)
            //     const filterName = userName.filter(userName => userName.includes(searchInput.value))
            //     console.log(filterName)
            //     const single = document.querySelector('.single')
            //     filterName.forEach(element => {
            //         const newLi = document.createElement('li')
            //         newLi.innerHTML = element
            //         single.appendChild(newLi)
            //     })
            //     //对author的遍历和读写
            //     const author = SearchData.map(SearchData => SearchData.author)
            //     // console.log(userName)
            //     const filterAuthor = author.filter(author => author.includes(searchInput.value))
            //     console.log(filterAuthor)
            //     const singer = document.querySelector('.singer')
            //     filterAuthor.forEach(element => {
            //         const newLi = document.createElement('li')
            //         newLi.innerHTML = element
            //         singer.appendChild(newLi)
            //     })
            //     //对album的遍历和读写
            //     const albumlist = SearchData.map(SearchData => SearchData.album)
            //     // console.log(userName)
            //     const filterAlbum = albumlist.filter(albumlist => albumlist.includes(searchInput.value))
            //     console.log(filterAlbum)
            //     const album = document.querySelector('.album')
            //     filterAlbum.forEach(element => {
            //         const newLi = document.createElement('li')
            //         newLi.innerHTML = element
            //         album.appendChild(newLi)
            //     })
            // }
            // useSearch()
        })
        searchInput.addEventListener('blur', function () {
            searchBox.style.display = 'none'
        })
    </script>
</body>

</html>